<template>
  <div style="margin:40px 0">
    <div class="wrap">
      <div class="label" v-if="sbrand !==''">
        <div>
          {{sbrand}}
        </div>
        <Icon type="ios-close" size="24" @click="selectBrand('')"></Icon>
      </div>
      <div class="label" v-if="srom !==''">
        <div>
          {{srom}}
        </div>
        <Icon type="ios-close" size="24" @click="selectRom('')"></Icon>
      </div>
      <div class="label" v-if="sos !==''">
        <div>
          {{sos}}
        </div>
        <Icon type="ios-close" size="24" @click="selectOs('')"></Icon>
      </div>
    </div>

    <div class="row" v-if="sbrand ===''">
      <div class="left">品牌</div>
      <div class="right">
        <div v-for="item in brand" style="margin:0 10px;" @click="selectBrand(item)" :key="item">{{item}}</div>
      </div>
    </div>
    <div class="row" v-if="srom ===''">
      <div class="left">机身内存</div>
      <div class="right">
        <div v-for="item in rom" style="margin:0 10px;" @click="selectRom(item)" :key="item">{{item}}</div>
      </div>
    </div>
    <div class="row" v-if="sos ===''">
      <div class="left">操作系统</div>
      <div class="right">
        <div v-for="item in os" style="margin:0 10px;" @click="selectOs(item)" :key="item">{{item}}</div>
      </div>
    </div>

  </div>
</template>
<script>
import service from "@/service";
export default {
  name: "comFilterMenu",
  data() {
    return {
      brand: [],
      rom: [],
      os: [],
      sbrand: "",
      srom: "",
      sos: ""
    };
  },
  created() {
    service.get("/v1/home/filterMenu").then(res => {
      console.log(res);
      this.brand = res.brand;
      this.rom = res.rom;
      this.os = res.os;
    });
  },
  methods: {
    selectBrand(brand) {
      this.sbrand = brand;
      this.$emit("on-filter", this.sbrand, this.srom, this.sos);
    },
    selectRom(rom) {
      this.srom = rom;
      this.$emit("on-filter", this.sbrand, this.srom, this.sos);
    },
    selectOs(os) {
      this.sos = os;
      this.$emit("on-filter", this.sbrand, this.srom, this.sos);
    }
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  display: flex;
  margin-left: 20px;
  margin-right: 20px;
  .label {
    display: flex;
    background: #2d8cf0;
    border-radius: 5px;
    color: #fff;
    padding: 2px 10px;
    line-height: 30px;
    font-size: 16px;
    margin-right: 10px;
  }
}
.row {
  display: flex;
  border-bottom: 1px solid #ddd;
  .left {
    width: 200px;
    height: 30px;
    line-height: 30px;
    background: #f3f3f3;
  }
  .right {
    display: flex;
    height: 30px;
    line-height: 30px;
    color: #005aa0;
  }
}
</style>

